<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<h1>空气净化器</h1>
			输入：<input type="text" v-model="pm25" />
			<h2>pm25={{pm25}}</h2>
			<img :src="theImg">
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						pm25: 180,
					}
				},
				// 计算属性
				computed: {
					theImg() {
						if (this.pm25 < 100) return "../img/1.png"
						else if (this.pm25 < 200) return "../img/2.png"
						else if (this.pm25 < 300) return "../img/3.png"
						else return "../img/4.png"
					}
				}
				//在Vue实例生命周期钩子函数中设置定时函数
				// watch: {
				//   pm25(newValue){
				//     this.pm25 = newValue;
				//     if (this.pm25 < 100) this.index = 1;
				//     else if (this.pm25 < 200) this.index = 2;
				//     else if (this.pm25 < 300) this.index = 3;
				//     else this.index = 4;
				//   };
			}).mount("#app");
		</script>
	</body>

</html>